<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 80%;
      margin: 20px auto;
    }

    .new_tab {
      margin-top: 20px;
    }

    .new_tab .active {
      background: red;
    }

    .new_list li span:nth-child(2) {
      float: left;
    }

    .new_list li span:nth-child(3) {
      float: right;

    }

    .new_list li span:nth-child(1) {
      display: none;
      float: left;
    }

    .new_list li .show {
      display: block !important;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div>
      新闻标题：<input type="text" id="newsTitle">
      <br>
      新闻地址 ：<input type="text" id="newUrl">
      <br>
      类别：<select name="" id="sel">
        <option value="0">科技</option>
        <option value="1">娱乐</option>
        <option value="2">财经</option>
      </select>
      <br>
      是否标红：<input type="radio" class="isred" value="1" checked name="isred">是 <input class="isred" type="radio"
        name="isred" value="0">否
      <br>
      <button id="add">提交</button>
    </div>
    <!-- tab切换部分 -->
    <div class="new_tab">
      <button class="active">科技</button>
      <button>娱乐</button>
      <button>财经</button>
    </div>
    <hr>
    <ul class="new_list">
      <li>
        <span>今天星期一 </span> <span>2020-09-09</span>
      </li>
    </ul>
  </div>
  <script>
    var btns = document.querySelectorAll(".new_tab button");
    var newlist = []
    if (localStorage.newlist) {
      newlist = JSON.parse(localStorage.newlist)
    } else {
      localStorage.newlist = JSON.stringify([])
    }

    var add = document.getElementById("add");
    var newstitleEle = document.getElementById("newsTitle");
    var newUrlEle = document.getElementById("newUrl");
    var selEle = document.getElementById("sel")
    var isred = document.querySelectorAll(".isred");

    add.addEventListener("click", function () {
      // 获取是否标红的value值---------------------
      var isredVal = ""
      for (var i = 0; i < isred.length; i++) {
        if (isred[i].checked) {
          isredVal = isred[i].value
        }
      }
      // ----------------------------------
      if (newstitleEle.value && newUrl.value) {
        console.log(isred)
        var obj = {
          id: +new Date(),
          newstitle: newstitleEle.value,
          newUrl: newUrlEle.value,
          category: selEle.value,
          isred: isredVal,
          date: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString().substr(2)
        }
        newlist.push(obj)
        localStorage.newlist = JSON.stringify(newlist)
        filterData(selEle.value) //根据当前添加的分类 渲染数据
        // ----------------------------
        for (var k = 0; k < btns.length; k++) {
          btns[k].className = ""
        }
        btns[selEle.value].className = "active";
        // ----------------------------
      } else {
        alert("新闻标题和地址不能为空")
      }
      // 清空
      newstitleEle.value = ""
      newUrlEle.value = ""
    }, true)

    // 数据加载-------------------------------------------------

    var new_list = document.querySelector(".new_list");
    function loadList(arr) {
      var str = ""
      for (var i = 0; i < arr.length; i++) {
        str += ` <li>
                   <span class="${arr[i].isred == "1" ? 'show' : ''}">Hot!!!</span> <span>${arr[i].newstitle} </span> <span>${arr[i].date}</span>
                   <button onclick="del(${arr[i].id})">删除</button>
                 </li>`
      }
      new_list.innerHTML = str;
      // 隔行变色
      var lis = document.querySelectorAll(".new_list li")
      for (var i = 0; i < lis.length; i++) {
        if (i % 2 == 0) {
          lis[i].style.background = "red"
        } else {
          lis[i].style.background = "green"
        }
      }

    }

    // 初始加载科技的内容
    function filterData(selNum) {
      var arr = [];
      newlist.forEach(function (ele, index) {
        if (ele.category == selNum) {
          arr.push(ele)
        }
      })
      loadList(arr)
    }
    filterData("0") //首次渲染科技的数据
    // tab切换
    var tabIndex = 0;
    for (var i = 0; i < btns.length; i++) {
      btns[i].index = i;
      btns[i].onclick = function () {
        for (var j = 0; j < btns.length; j++) {
          btns[j].className = ""
        }
        this.className = "active"
        // 点击切换 筛选数据
        var ind = this.index;//当前点击的按钮下标   0  1  2
        tabIndex = this.index; //记录当前的tab下标
        filterData(ind) //根据当前点击下标渲染数据
      }
    }
    // 删除  ----------------------------
    function del(id) {
      for (var i = 0; i < newlist.length; i++) {
        if (newlist[i].id == id) {
          newlist.splice(i, 1)
        }
      }
      localStorage.newlist = JSON.stringify(newlist);
      filterData(tabIndex)
    }
  </script>
</body>

</html>